<template>
  <div class="app-container">
    <el-dialog :title="formData.id ? '编辑' : '新增'" :visible.sync="dialogFormVisible">
      <el-form :model="formData" ref="formData" :rules="rules">
        <el-form-item label="账号" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="formData.userName" placeholder="账号" autocomplete="off" :disabled="updateUserName"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model="formData.password" placeholder="密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formData.name" placeholder="真实姓名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系手机号" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="formData.phone" placeholder="联系手机号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="formData.email" placeholder="联系邮箱" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关联角色" :label-width="formLabelWidth" prop="roleIds">
          <el-select v-model="formData.roleIds" multiple placeholder="请选择关联的角色">
            <el-option
              v-for="item in roleIdsOptions"
              :key="item.id"
              :label="item.roleName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import adminUserApi from '@/api/core/sys/admin-user'
  export default {
    data () {
      return {
        formData: {
          id: '',
          userName: '',
          password: '',
          name: '',
          phone: '',
          email: '',
          roleIds: ''
        },
        rules: {
          userName: [
            { required: true, message: '请填写账号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请填写真实姓名', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请填写联系手机号', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请填写联系邮箱', trigger: 'blur' }
          ]
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
        updateUserName: false,
        roleIdsOptions: []
      }
    },
    created () {},
    methods: {
      init(id) {
        this.formData.id = id
        this.dialogFormVisible = true
        if (id) {
          // 查询
          this.updateUserName = true
          this.queryById(id)
        } else {
          this.updateUserName = false
          this.formData = {
            id: '',
            userName: '',
            password: '',
            name: '',
            phone: '',
            email: '',
            roleIds: ''
          }
        }
        // 查询所有角色
        this.queryRoleAll()
      },
      // 查询所有角色
      queryRoleAll() {
        adminUserApi.listRoleAll().then(res => {
          this.roleIdsOptions = res.data.roles
        }).catch()
      },
      // 查询单个信息
      queryById(id) {
        adminUserApi.listById(id).then(res => {
          this.formData = res.data.info
          this.formData.updateTime = ''
        }).catch(res => {
          this.$message.error(res.message)
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            adminUserApi.saveOrUpdate(this.formData).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: res.message,
                  type: 'success'
                })
                this.dialogFormVisible = false
                this.$emit('refreshDataList')
              }
            }).catch(res => {
              this.$message.error(res.message)
            })
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped></style>